{extend name="app/shop/view/base.html"/}
{block name="resources"}
<style>
	.layui-layout-admin.admin-style-2 .layui-form-item .layui-input-inline{background-color: #fff;}
	.layui-layout-admin.admin-style-2 .table-tab .layui-tab-title{margin-bottom: 15px;}
</style>
{/block}
{block name="main"}
<div class="single-filter-box">
	<button class="layui-btn" onclick="add()">添加活动</button>
</div>

<!-- 搜索框 -->
<div class="screen layui-collapse" lay-filter="selection_panel">
	<div class="layui-colla-item">
		<form class="layui-colla-content layui-form layui-show">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">活动名称：</label>
					<div class="layui-input-inline">
						<input type="text" name="jielong_name" placeholder="请输入活动名称" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">活动时间：</label>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="start_time" placeholder="开始时间" id="start_time" readonly>
						<i class=" iconrili iconfont calendar"></i>
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
						<input type="text" class="layui-input" name="end_time" placeholder="结束时间" id="end_time" readonly>
						<i class=" iconrili iconfont calendar"></i>
					</div>
				</div>
			</div>

			<div class="form-row">
				<button type="button" class="layui-btn" lay-filter="search" lay-submit>筛选</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
</div>

<div class="layui-tab table-tab" lay-filter="jielong_tab">
	<ul class="layui-tab-title">
		<li class="layui-this" data-status="">全部</li>
		{foreach $jielong_status as $k=>$v}
		<li data-status="{$k}">{$v}</li>
		{/foreach}
	</ul>
	<div class="layui-tab-content">
		<!-- 列表 -->
		<table id="jielong_list" lay-filter="jielong_list"></table>
	</div>
</div>

<!-- 时间 -->
<script id="time" type="text/html">
	<div class="layui-elip">开始：{{ns.time_to_date(d.start_time)}}</div>
	<div class="layui-elip">结束：{{ns.time_to_date(d.end_time)}}</div>
</script>

<!-- 操作 -->
<script type="text/html" id="operation">
	<div class="table-btn">
		<a class="layui-btn text-color" lay-event="extension">推广</a>
		<a class="layui-btn" lay-event="detail">详情</a>
		<a class="layui-btn" lay-event="launch">订单列表</a>
		{{# if(d.status == 0){ }}
		<a class="layui-btn" lay-event="edit">编辑</a>
		<a class="layui-btn" lay-event="del">删除</a>
		{{# }else if(d.status == 1){ }}
		<a class="layui-btn" lay-event="edit">编辑</a>
		<a class="layui-btn" lay-event="close">关闭</a>
		{{# }else{ }}
		<a class="layui-btn" lay-event="del">删除</a>
		{{# } }}
	</div>
</script>
{include file="app/shop/view/promote.html"}
{/block}
{block name="script"}
<script>
	var laytpl,form;
	$(function () {
		layui.use(['form', 'element', 'laytpl', 'laydate'], function () {
			laytpl = layui.laytpl;
			form = layui.form;
			var table,
			element = layui.element,
			laydate = layui.laydate,
			repeat_flag = false; //防重复标识
			form.render();

			//监听Tab切换，以改变地址hash值
			element.on('tab(jielong_tab)', function () {
				table.reload({
					page: {
						curr: 1
					},
					where: {
						'status': this.getAttribute('data-status')
					}
				});
			});

			//开始时间
			laydate.render({
				elem: '#start_time', //指定元素
                type: 'datetime'
				, done: function (value, date, endDate) {
					start_time = ns.date_to_time(value);

				}
			});
			//结束时间
			laydate.render({
				elem: '#end_time', //指定元素
                type: 'datetime'
				, done: function (value, date, endDate) {
					end_time = ns.date_to_time(value);
				}
			});

			table = new Table({
				elem: '#jielong_list',
				url: ns.url("jielong://shop/jielong/lists"),
				cols: [
					[{
						title: '活动名称',
						unresize: 'false',
						field: 'jielong_name',
					}, {
						field: 'goods_num',
						title: '商品数',
						width: '10%',
						unresize: 'false'
					}, {
						field: 'order_num',
						title: '订单数',
						width: '10%',
						unresize: 'false'
					}, {
						title: '活动时间',
						unresize: 'false',
						width: '20%',
						templet: '#time'
					}, {
						field: 'status_name',
						title: '状态',
						unresize: 'false',
						width: '10%'
					}, {
						title: '操作',
						toolbar: '#operation',
						unresize: 'false',
						align : 'right'
					}]
				],
			});

			/**
			 * 搜索功能
			 */
			form.on('submit(search)', function (data) {
				table.reload({
					page: {
						curr: 1
					},
					where: data.field
				});
			});

			table.on("sort",function (obj) {
				table.reload({
					page: {
						curr: 1
					},
					where: {
						order:obj.field,
						sort:obj.type
					}
				});
			});

			//监听Tab切换
			element.on('tab(status)', function (data) {
				var status = $(this).attr("data-status");
				table.reload({
					page: {
						curr: 1
					},
					where: {
						'status': status
					}
				});
			});

			/**
			 * 监听工具栏操作
			 */
			table.tool(function (obj) {
				var data = obj.data;
				switch (obj.event) {
					case 'detail': //详情
						location.href = ns.url("jielong://shop/jielong/detail", {"jielong_id": data.jielong_id});
						break;
					case 'edit': //编辑
						location.href = ns.url("jielong://shop/jielong/edit", {"jielong_id": data.jielong_id});
						break;
					case 'del': //删除
						deleteJielong(data.jielong_id);
						break;
					case 'close': //结束
						closeJielong(data.jielong_id);
						break;
					case 'launch': //订单
						location.href = ns.url("jielong://shop/order/lists", {"jielong_id": data.jielong_id});
						break;
					case 'extension': //推广
						extensionJielong(data.jielong_id);
						break;
				}
			});

			/**
			 * 删除
			 */
			function deleteJielong(jielong_id) {
				layer.confirm('确定要删除该接龙活动吗?', function () {
					if (repeat_flag) return;
					repeat_flag = true;

					$.ajax({
						url: ns.url("jielong://shop/jielong/delete"),
						data: {
							jielong_id: jielong_id
						},
						dataType: 'JSON',
						type: 'POST',
						success: function (res) {
							layer.msg(res.message);
							repeat_flag = false;
							if (res.code == 0) {
								table.reload({
									page: {
										curr: 1
									},
								});
							}
						}
					});
				}, function () {
					layer.close();
					repeat_flag = false;
				});
			}

			// 结束
			function closeJielong(jielong_id) {

				layer.confirm('确定要关闭该接龙活动吗?', function () {
					if (repeat_flag) return;
					repeat_flag = true;

					$.ajax({
						url: ns.url("jielong://shop/jielong/finish"),
						data: {
							jielong_id: jielong_id
						},
						dataType: 'JSON',
						type: 'POST',
						success: function (res) {
							layer.msg(res.message);
							repeat_flag = false;
							if (res.code == 0) {
								table.reload();
							}
						}
					});
				}, function () {
					layer.close();
					repeat_flag = false;
				});
			}

			//推广
			function extensionJielong(jielong_id) {
				if (repeat_flag) return false;
				repeat_flag = true;
				$.ajax({
					type: 'POST',
					url: ns.url("jielong://shop/jielong/poster"),
					data:{
						jielong_id:jielong_id,
					},
					dataType: 'JSON',
					success: function (res) {
						if(res.code==0){
							res.data.id = jielong_id;
							laytpl($("#promote").html()).render(res.data, function (html) {
								layer.open({
									type: 1,
									area: ['670px', '450px'],
									offset: '155px',
									title: ['推广'],
									content: html,
									success: function(){
										// 推广渠道监听
										promoteTypeSwitch(form, res)
									}
								});
								form.render();
								repeat_flag = false;
							});
						}else{
							layer.msg('加载失败，请重试');
							repeat_flag = false;
						}
					}
				});
			}

			//获取推广数据
			function getPoster(jielong_id,app_type){
				$.ajax({
					type: 'POST',
					url: ns.url("jielong://shop/jielong/poster"),
					data:{
						jielong_id:jielong_id,
						app_type:app_type
					},
					dataType: 'JSON',
					success: function (res) {
						if(res.code==0){

							var obj = {
								poster_path: res.data.poster_path,
								qrcode_path: res.data.qrcode_path,
								qrcode_url: res.data.qrcode_url,
								status:res.data.status,
								jielong_id:jielong_id
							};

							$("#h5").attr("data-jielong_id",obj.jielong_id);
							$("#weapp").attr("data-jielong_id",obj.jielong_id);

							var table = $('#new_tab');
							table.empty();

							if (app_type == 'h5'){
								var str =
										'<div style="width: 230px; height: 400px; margin-left: 20px">'+
										'<img style="width:100%;" src="'+ns.img(obj.poster_path)+'" alt="海报">'+
										'</div>'+
										'<div style="width: 200px; height: 400px; margin-left: 20px">'+
										'<span>分享链接</span>'+
										'<div class="layui-form-item">'+
										'<div class="layui-input-block" style="margin-left: 1px; width: 250px;">'+
										'<input type="text" name="title"  value="'+obj.qrcode_url+'" readonly class="layui-input" id="url1">'+
										'</div>'+
										'</div>'+
										"<button type=\"submit\" class=\"layui-btn\" style=\"position: absolute; top: 60px; right: 135px;\" onclick=\"ns.copy('url1')\">复制</button>"+
										"<p style=\"color: #2767D8; margin-right: 20px;cursor:pointer;display: inline-block;\" onclick=\"download('"+ns.img(obj.poster_path)+"')\">下载海报</p>"+
										"<p style=\"color: #2767D8;cursor:pointer;display: inline-block;\" onclick=\"download('"+ns.img(obj.qrcode_path)+"')\">下载二维码</p>"+
										'</div>';
								table.append(str);
							}else{
								if (obj.status == 1){
									var str =
											'<div style="width: 230px; height: 400px; margin-left: 20px">'+
											'<img style="width:100%;" src="'+ns.img(obj.poster_path)+'" alt="海报">'+
											'</div>'+
											'<div style="width: 200px; height: 400px; margin-left: 20px">'+
											"<p style=\"color: #2767D8; margin-right: 20px;cursor:pointer;display: inline-block;\" onclick=\"download('"+ns.img(obj.poster_path)+"')\">下载海报</p>"+
											"<p style=\"color: #2767D8;cursor:pointer;display: inline-block;\" onclick=\"download('"+ns.img(obj.qrcode_path)+"')\">下载二维码</p>"+
											'</div>';
									table.append(str);
								}else{
									var str =
											'<div style="width: 200px; height: 400px; margin-left: 20px">'+
											'<span>您尚未绑定小程序</span>'+
											'<button type="submit" class="layui-btn" onClick="binding()">去绑定小程序</button>'+
											'</div>';
									table.append(str);
								}
							}

						}
					}
				});
			}

			$(document).on('click','#h5',function() {
				var jielong_id = this.getAttribute('data-jielong_id');
				getPoster(jielong_id,'h5');
			});
			$(document).on('click','#weapp',function() {
				var jielong_id = this.getAttribute('data-jielong_id');
				getPoster(jielong_id,'weapp');
			});
		});

	});
	function add() {
		location.href = ns.url("jielong://shop/jielong/add");
	}
	function binding() {
		location.href = ns.url("weapp://shop/weapp/setting");
	}

	//下载图片
	function download(url) {
		location.href = ns.url("shop/upload/download", {img_url : encodeURIComponent(url), type : 1});
	}
</script>
{/block}